<template>
    <div class="person">
        <h4>姓名：{{ name }}</h4>
        <h4>年龄：{{ age }}</h4>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showtel">查看联系方式</button>
    </div>
</template>

<!-- 下载插件，就可以对文件名进行修改，今日少写一个script 标签 -->
<script lang="ts" setup name="Person123">   //加了setup，会不用再进行数据返回的操作，不用return ,自动导出
    //数据
    let name = '真米酒';
    let age = 19;
    let tel = '1234567890';            
    //方法
    //名字和年龄都修改成功，但是页面不会修改呈现，因为没有做到动态相应
    function changeName(){
        name = '小羊肖恩';  
        console.log(name);
    }
    function changeAge(){
        age += 1;
        console.log(age);
    }
    function showtel(){
        alert('电话：'+ tel);
    }
</script>
<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        height: 150px;
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>